<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            height: 100%
        }
        body {
            margin: 0;
            height: 100%;
            background: #fff;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas">
            Your browser doesn't support canvas
    </canvas>
</body>
<script>
    class Circle {
        constructor(x, y) {
            this.x = x
            this.y = y
            this.r = Math.random() * 10
            this._mx = Math.random();
            this._my = Math.random();
        }

        drawCircle(ctx) {
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
            ctx.closePath()
            ctx.fillStyle = 'rgba(204, 204, 204, 0.3)'
            ctx.fill()
        }
        
        // otherCircle 创建的其他的 circle 的数据
        drawLine(ctx, otherCircle) {
            let dx = this.x - otherCircle.x
            let dy = this.y - otherCircle.y
            let distance = Math.sqrt(dx * dx + dy * dy) // 两个点 x, y 距离差的平方和，然后开平方（勾股定理），求出两个点之间的距离
            if (distance < 150) {
                ctx.beginPath()
                ctx.moveTo(this.x, this.y)
                ctx.lineTo(otherCircle.x, otherCircle.y)
                ctx.closePath()
                ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)'
                ctx.stroke()
            }
        }

        // 圆圈移动的距离必须在屏幕范围内
        move(w, h) {
            this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
            this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
            this.x += this._mx / 2;
            this.y += this._my / 2;
        }
    }

    // 鼠标
    class CurrentCircle {
        constructor(x, y) {
            super(x, y)
        }

        drawCircle(ctx) {
            ctx.beginPath()
            this.r = 8
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
            ctx.closePath()
            ctx.fillStyle = 'rgba(204, 204, 204, 0.3)'
            ctx.fill()
        }
    }
    let canvas =  document.getElementById('canvas')
    let ctx = canvas.getContext('2d')
    
    let w = canvas.width = canvas.offsetWidth;
    let h = canvas.height = canvas.offsetHeight;
    let circleArrray = []
    let currentCircle = new CurrentCircle(0, 0)
    let init = function(num) {
        for (let i = 0; i < num; i++) {
            circleArrray.push(new Circle(Math.random() * w, Math.random() * h))
        }
        draw()
    }

    let draw = function() {
        ctx.clearRect(0, 0, w, h)
        for(let i = 0; i < circleArrray.length; i++) {
            circleArrray[i].move(w, h)
            circleArrray[i].drawCircle(ctx)
            for(let j = i + 1; j < circleArrray.length; j++) {
                circleArrray[i].drawLine(ctx, circleArrray[j])
            }

            if(currentCircle.x) {
                currentCircle.drawCircle(ctx)
                for (let n =0; n < circleArrray.length; n++) {
                    currentCircle.drawLine(ctx, circleArrray[n])
                }
            }
        }
        window.requestAnimationFrame(draw)
    }
    init(60)

    // 鼠标移动 定义 x y
    window.onmousemove = (e) => {
        e = e || window.event
        currentCircle.x = e.clientX
        currentCircle.y = e.clientY
    }

    window.onmouseout = (e) => {
        e = e || window.event
        currentCircle.x = null
        currentCircle.y = null
    }
</script>
</html>